$color-yellow: rgb(255,205,50);
$color-blue: rgb(148,196,216);

.main-wrapper {
    color: #fff;
    padding-top: 1.3rem;

    .item-block {
        margin: 0 .3rem .7rem .3rem;
        padding: .3rem;
        background-color: rgba(255, 255, 255,.3);
        border-radius: .1rem;
        overflow: hidden;
        font-family: "Righteous", cursive;
    }

    .item-title {
        padding: 0 .3rem;
        margin-bottom: .2rem;
    }

    .item-tips {
        color: #777;
        font-size: .24rem;
        padding: .1rem .3rem .2rem;
    }

    .tips-black {
        color: #000;
        font-size: .2rem;
        font-weight: 200;
    }

    .tips {
        text-align: center;
        font-size: .24rem;
        padding: .2rem;
        color: #777;
    }
}

$level: .3rem;
.p-level {

    label {
        display: block;
    }

    > label {
        padding-left: $level;
        color: $color-yellow;

        > label {
            padding-left: $level;
            color: #aaa;
            font-size: .24rem;
        }
    }
}


.demo-layer {
    opacity: 0;

    -webkit-animation: opa 1s;
    animation: opa 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes opa {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes opa {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}